<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";


</script>


<template>
  <div class="welcome-container">
    <div class="content">
      <img src="@/assets/tabus.jpg" style="width: 200px" alt="Logo">
      <h1>欢迎使用TABUS</h1>
      <p><strong>友情赞助：</strong> TABUS赞助、学哥教学网站 </p>
      <p><strong>本项目wps文档地址：</strong> <a target="_blank" href="https://www.kdocs.cn/l/cdmQwhJTz6Hj?from=docs">https://www.kdocs.cn/l/cdmQwhJTz6Hj?from=docs</a>
      </p>
      <p><strong>后端gitee地址：</strong> <a target="_blank"
                                            href="https://gitee.com/hyt1717/tabus">TABUS: TABUS智慧教室</a>
      </p>
      <p><strong>前端gitee地址：</strong> <a target="_blank"
                                            href="https://gitee.com/hyt1717/vue3-tabus">TABUS: hyt/vue3-tabus</a>
      </p>
      <p><strong>智能体WEB链接：</strong> <a target="_blank"
                                            href="https://yuanqi.tencent.com/agent/bjkRHf7MsfKE">TABUS智能体</a>
      </p>
      <img src="@/assets/img.png" style="width: 200px" alt="Team">
    </div>
  </div>
</template>

<style scoped>
a:hover {
  text-decoration: underline;
}

.welcome-container {
  padding: 100px 0;
  background-color: #f5f7fa;
  font-family: 'Arial', sans-serif;
}

.content {
  text-align: center;
}

h1 {
  color: #000;
  font-size: 2rem;
  margin-bottom: 20px;
}

.team-info {
  font-size: 1rem;
  color: #000;
}

p, strong {
  color: #000;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

ul li {
  padding: 5px;
  border-bottom: 5px;
  background-color: #fff;
}

ul li:active {
  background-color: #f0f0f0;
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide {
  animation: slideIn 0.5s ease forwards;
}

</style>
